import React, { memo, Suspense } from 'react'
import { Provider } from 'react-redux'
import { HashRouter } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'

import routes from '@/router'
import store from '@/store'

import MXAppHeader from 'components/app-header'
import MXAppFooter from 'components/app-footer'
import MXAppPlayerBar from './pages/player/app-player-bar'

export default memo(function App() {
  return (
    <Provider store={store}>
      <HashRouter>
        <MXAppHeader/>
        <Suspense fallback={<div>loading</div>}>
        {renderRoutes(routes)}
        </Suspense>
        <MXAppFooter/>
        <MXAppPlayerBar/>
      </HashRouter>
    </Provider>
  )
})

